<template>
    <div class="form-block-inner">
        <Form :model="formItem" label-position="top" ref="baseForm">
            <br/>
            <div v-for="(item,index) in dataList" :key="index">
                <Row :gutter="16">
                    <Col span="23" offset="1">
                        <Row>
                            <Col span="18">
                                <FormItem class="required" label="问题类型:" prop="type">
                                    <span slot="label">问题类型:
                                        <Tooltip :content="tip" placement="right" theme="light" max-width="200">
                                            <Icon type="md-help-circle" class="excel-help"/>
                                        </Tooltip>
                                 </span>
                                    <CheckboxGroup v-model="item.wtgk_type" @on-change="checkBoxChange">
                                        <Checkbox v-for="(item1,index1) in nameList" :key="index1"
                                                  :label="item1"></Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                            <Col span="6">
                                <FormItem label=" " class="col-last-btn">
                                    <Button @click="delAction(index)" class="col-last-btn" type="error" shape="circle"
                                            icon="md-close"></Button>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem class="required" label="发送对象:" prop="send_type">
                                    <Select clearable v-model="item.send_type" style="width:100%">
                                        <Option value="1">在线监督治理平台</Option>
                                        <Option value="2">单位（部门）主要领导</Option>
                                        <Option value="3">单位（部门）分管领导</Option>
                                        <Option value="4">单位（部门）业务处室负责人</Option>
                                        <Option value="5">单位（部门）经办人</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                    <Divider/>
                </Row>
            </div>
            <Row>
                <Col span="24">
                    <Button :disabled="!btnShow" type="success" @click="add">添加</Button>
                </Col>
            </Row>
        </Form>
         <div class="btn-style">
             <common-save-btn :base-info-id="baseInfoId"  :form-data="dataList" dbName="GovProblem"></common-save-btn>
         </div>
        <br>
    </div>
</template>

<script>
import CommonSaveBtn from '@/components/common-save-btn'
import { selectSstGovProblemByBaseList } from '@/api/setting'
export default {
  name: 'ProblemSetting',
  components: { CommonSaveBtn },
  data () {
    return {
      tip: '指该事项出现相关问题后需要发送的对象。',
      formItem: {},
      dataList: [],
      nameList: [
        '流程问题',
        '要件问题',
        '规则问题',
        '条件问题',
        '公示问题',
        '制度问题',
        '监督问题',
        '预警问题',
        '时限问题',
        '轮巡问题',
        '评价问题',
        '反馈问题',
        '权限问题'
      ]
    }
  },
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabName: {
      type: String,
      default: () => {
        return ''
      }
    },
    baseInfoId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    init () {
      if (this.tabName === '20') {
        let param = { base_info_id: this.baseInfoId }
        selectSstGovProblemByBaseList(param).then(res => {
          this.loading = false
          if (res.data.errcode === 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].wtgk_type = res.data.data[i].type.split(',')
            }
            this.dataList = this.$common.xeUtils.clone(res.data.data)
          } else {
            this.$Message.error('数据获取失败!')
          }
        }).catch(ret => {
          this.loading = false
          // this.$Message.error(ret)
        })
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    add () {
      this.dataList.push({ gov_base_id: this.$route.query.id })
    },
    delAction (index) {
      this.dataList.splice(index, 1)
    },
    checkBoxChange (val) {
      this.dataList = this.$common.xeUtils.clone(this.dataList)
    }
  },
  computed: {
    btnShow () {
      if (this.$route.query.id !== undefined) {
        return this.$route.query.id
      } else {
        return false
      }
    }
  },
  mounted () {
  },
  watch: {
    // options (data) {
    //   this.dataList = data
    // },
    // dataList (data) {
    //   this.$emit('result', data)
    // },
    tabName (data) {
      this.init()
    },
    baseInfoId (data) {
      this.baseInfoId = data
    }
  }
}
</script>

<style scoped>
    .btn-style {
        margin-top: 5px;
    }

    .form-block-inner {
        margin-bottom: 50px;
    }

    .col-last-btn {
        float: right;
        margin-right: 40px;
    }

    .required /deep/.ivu-form-item-label:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }
    .excel-help {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }
</style>
